<ion-header>
    <ion-toolbar color="light">
        <ion-buttons start >
            <button ion-button icon-only navPop>
                <ion-icon name="arrow-back" ></ion-icon>
            </button>
        </ion-buttons>
        <ion-title>{{ 'filter.Filter' | translate }}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
     <div class="fliter-menu light">
         <span [class.active]="2 === selectedItem" (click)="onSelect(2)">{{ 'home.Buy' | translate }}</span>
         <span [class.active]="1 === selectedItem" (click)="onSelect(1)">{{ 'home.Rent' | translate }}</span>
         <span [class.active]="3 === selectedItem" (click)="onSelect(3)">{{ 'home.Per' | translate }}</span>
         <span [class.active]="4 === selectedItem" (click)="onSelect(4)">{{ 'home.Services' | translate }}</span>
     </div>
     <div class="content-form none" [class.active]="2 === selectedItem">
            <ion-item class="hc-ion-select" (click)="gotocity()">
                <ion-label color="main">{{ 'filter.address' | translate }} <span style="float:right">{{ info_buy.city }}<i class="iconfont icon-next" style="vertical-align: middle;"></i></span> </ion-label>
            </ion-item>
            <div class="hc-form-item">
                <ion-label color="main">{{ 'filter.range' | translate }}</ion-label>
                <div class="hc-input-container-2">
                    <input type="text" placeholder="Min" [(ngModel)]="info_buy.price_min">
                    <span class="line"></span>
                    <input type="text" placeholder="Max" [(ngModel)]="info_buy.price_max">
                </div>
                
            </div>
            <ion-item class="hc-ion-select">
                <ion-label color="main">{{ 'filter.search' | translate }}</ion-label>
                <ion-input type="number" placeholder="unit:'km'" [(ngModel)]="info_buy.distance"></ion-input>
            </ion-item>
            <ion-item class="hc-ion-select">
                <ion-label color="main" (click)="active.bedroom=active.bedroom?false:true">{{ 'filter.Bedrooms' | translate }}
                    <span style="float:right">
                        <i [class]="active.bedroom?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                    </span> 
                </ion-label>
            </ion-item>
            <div radio-group [(ngModel)]="info_buy.bedroom" class="num-box" [hidden]="!active.bedroom">
                <ion-item class="num-box-item">
                    <ion-label>{{ 'input.Any' | translate }}</ion-label>    
                    <ion-radio value=""></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>1+</ion-label> 
                    <ion-radio value="1" ></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>2+</ion-label> 
                    <ion-radio value="2"><span>1+</span></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>3+</ion-label> 
                    <ion-radio value="3"></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>4+</ion-label> 
                    <ion-radio value="4"></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>5+</ion-label> 
                    <ion-radio value="5"></ion-radio>
                </ion-item>
            </div>
            <ion-item class="hc-ion-select">
                <ion-label color="main" (click)="active.bathroom=active.bathroom?false:true">{{ 'filter.Bathrooms' | translate }}
                    <span style="float:right">
                        <i [class]="active.bathroom?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                    </span> 
                </ion-label>
            </ion-item>
            <div radio-group [(ngModel)]="info_buy.bathroom" class="num-box" [hidden]="!active.bathroom">
                <ion-item class="num-box-item">
                    <ion-label>{{ 'input.Any' | translate }}</ion-label>    
                    <ion-radio value=""></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>1+</ion-label> 
                    <ion-radio value="1" ></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>2+</ion-label> 
                    <ion-radio value="2"><span>1+</span></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>3+</ion-label> 
                    <ion-radio value="3"></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>4+</ion-label> 
                    <ion-radio value="4"></ion-radio>
                </ion-item>
                <ion-item class="num-box-item">
                    <ion-label>5+</ion-label> 
                    <ion-radio value="5"></ion-radio>
                </ion-item>
            </div>
            <ion-item class="hc-ion-select">
                <ion-label color="main" (click)="active.type=active.type?false:true">{{ 'filter.type' | translate }}
                    <span style="float:right">
                        <i [class]="active.type?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                    </span> 
                </ion-label>
            </ion-item>
            <ion-list radio-group [(ngModel)]="info_buy.type" class="hc-radio-group" [hidden]="!active.type">
                <ion-item>
                    <ion-label>{{ 'input.Any' | translate }}</ion-label>
                    <ion-radio value=""></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.Shared' | translate }}</ion-label>
                    <ion-radio value="1"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.Flat' | translate }}</ion-label>
                    <ion-radio value="2"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.House' | translate }}</ion-label>
                    <ion-radio value="3"></ion-radio>
                </ion-item>
            </ion-list>
            <ion-item class="hc-ion-select">
                <ion-label color="main" (click)="active.postby= active.postby?false:true">{{ 'filter.Postby' | translate }}
                    <span style="float:right">
                        <i [class]="active.postby?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                    </span> 
                </ion-label>
            </ion-item>
            <ion-list radio-group [(ngModel)]="info_buy.postby" class="hc-radio-group" [hidden]="!active.postby">
                <ion-item>
                    <ion-label>{{ 'input.Any' | translate }}</ion-label>
                    <ion-radio value=""></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.Agent' | translate }}</ion-label>
                    <ion-radio value="1"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.Owner' | translate }}</ion-label>
                    <ion-radio value="2"></ion-radio>
                </ion-item>
            </ion-list>
            <ion-item class="hc-ion-select">
                <ion-label color="main" (click)="active.sortby= active.sortby?false:true">{{ 'filter.Sortby' | translate }}
                    <span style="float:right">
                        <i [class]="active.sortby?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                    </span> 
                </ion-label>
            </ion-item>
            <ion-list radio-group [(ngModel)]="info_buy.sortby" class="hc-radio-group" [hidden]="!active.sortby">
                <ion-item>
                    <ion-label>{{ 'input.order1' | translate }}</ion-label>
                    <ion-radio value="addtime desc"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.order2' | translate }}</ion-label>
                    <ion-radio value="price asc"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.order3' | translate }}</ion-label>
                    <ion-radio value="price desc"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.order4' | translate }}</ion-label>
                    <ion-radio value="area asc"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.order5' | translate }}</ion-label>
                    <ion-radio value="area desc"></ion-radio>
                </ion-item>
            </ion-list>
            <ion-item-divider class="hc-ion-item keyword" color="light">
                <ion-label stacked>{{ 'filter.Keywords' | translate }}</ion-label>
                <ion-input placeholder="The garage, the Shared lease, the sea shore, etc..." [(ngModel)]="info_buy.keyword"></ion-input>
            </ion-item-divider>
            <div class="hc-ion-button">
                <button ion-button navPop>{{ 'filter.Clear' | translate }}<</button>
                <button ion-button (click)="goback()">{{ 'filter.Filter' | translate }}<</button>  
            </div>
     </div>
     <div class="content-form none" [class.active]="1 === selectedItem">
            <ion-item class="hc-ion-select" (click)="gotocity()">
                    <ion-label color="main">{{ 'filter.address' | translate }} <span style="float:right">{{ info_rent.city }}<i class="iconfont icon-next" style="vertical-align: middle;"></i></span> </ion-label>
                </ion-item>
                <div class="hc-form-item">
                    <ion-label color="main">{{ 'filter.avadate' | translate }}</ion-label>
                    <div class="hc-input-container-2">
                        <div class="datetime-container">
                            <ion-datetime displayFormat="YYYY-MM-DD" palceholader="" [(ngModel)]="info_rent.date_min" min="2018" max="2040"></ion-datetime>
                            <span class="tidai" *ngIf="!info_rent.date_min">{{ 'filter.sd' | translate }}</span>
                        </div>
                        
                        <span class="line"></span>
                        <div class="datetime-container">
                            <ion-datetime displayFormat="YYYY-MM-DD" palceholader="End day" [(ngModel)]="info_rent.date_max" [min]="info_rent.date_min" max="2040"></ion-datetime>
                            <span class="tidai" *ngIf="!info_rent.date_max">{{ 'filter.ed' | translate }}</span>
                        </div>
                    </div>
                    
                </div>
                <div class="hc-form-item">
                    <ion-label color="main">{{ 'filter.range' | translate }}</ion-label>
                    <div class="hc-input-container-2">
                        <input type="text" placeholder="Min" [(ngModel)]="info_rent.price_min">
                        <span class="line"></span>
                        <input type="text" placeholder="Max" [(ngModel)]="info_rent.price_max">
                    </div>
                    
                </div>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'filter.search' | translate }}</ion-label>
                    <ion-input type="number" placeholder="unit:'km'"  [(ngModel)]="info_rent.distance"></ion-input>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.bedroom=active.bedroom?false:true">{{ 'filter.Bedrooms' | translate }}
                        <span style="float:right">
                            <i [class]="active.bedroom?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <div radio-group [(ngModel)]="info_rent.bedroom" class="num-box" [hidden]="!active.bedroom">
                    <ion-item class="num-box-item">
                        <ion-label>Any</ion-label>    
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>1+</ion-label> 
                        <ion-radio value="1" ></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>2+</ion-label> 
                        <ion-radio value="2"><span>1+</span></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>3+</ion-label> 
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>4+</ion-label> 
                        <ion-radio value="4"></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>5+</ion-label> 
                        <ion-radio value="5"></ion-radio>
                    </ion-item>
                </div>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.bathroom=active.bathroom?false:true">{{ 'filter.Bathrooms' | translate }}
                        <span style="float:right">
                            <i [class]="active.bathroom?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <div radio-group [(ngModel)]="info_rent.bathroom" class="num-box" [hidden]="!active.bathroom">
                    <ion-item class="num-box-item">
                        <ion-label>Any</ion-label>    
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>1+</ion-label> 
                        <ion-radio value="1" ></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>2+</ion-label> 
                        <ion-radio value="2"><span>1+</span></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>3+</ion-label> 
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>4+</ion-label> 
                        <ion-radio value="4"></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>5+</ion-label> 
                        <ion-radio value="5"></ion-radio>
                    </ion-item>
                </div>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.type=active.type?false:true">{{ 'filter.type' | translate }}
                        <span style="float:right">
                            <i [class]="active.type?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_rent.type" class="hc-radio-group" [hidden]="!active.type">
                    <ion-item>
                        <ion-label>Any</ion-label>
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Shared</ion-label>
                        <ion-radio value="1"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Flats</ion-label>
                        <ion-radio value="2"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Houses</ion-label>
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.postby= active.postby?false:true">{{ 'filter.Postby' | translate }}
                        <span style="float:right">
                            <i [class]="active.postby?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_rent.postby" class="hc-radio-group" [hidden]="!active.postby">
                    <ion-item>
                        <ion-label>Any</ion-label>
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Agent</ion-label>
                        <ion-radio value="1"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Owner</ion-label>
                        <ion-radio value="2"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.house_conf= active.house_conf?false:true">{{ 'filter.Furnished' | translate }} 
                        <span style="float:right">
                            <i [class]="active.house_conf?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_rent.house_conf" class="hc-radio-group" [hidden]="!active.house_conf">
                    <ion-item>
                        <ion-label>Any</ion-label>
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Fully furnished</ion-label>
                        <ion-radio value="1"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Partially furnished</ion-label>
                        <ion-radio value="2"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Unfurnished</ion-label>
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'filter.po' | translate }}</ion-label>
                    <ion-toggle [(ngModel)]="info_rent.stu_in"></ion-toggle>
                </ion-item>
                
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'filter.pf' | translate }}</ion-label>
                    <ion-toggle [(ngModel)]="info_rent.pet_in"></ion-toggle>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.people_in= active.people_in?false:true">{{ 'filter.Accept' | translate }} 
                        <span style="float:right">
                            <i [class]="active.people_in?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_rent.people_in" class="hc-radio-group" [hidden]="!active.people_in">
                    <ion-item>
                        <ion-label>Any</ion-label>
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Male</ion-label>
                        <ion-radio value="1"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Female</ion-label>
                        <ion-radio value="2"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Couple</ion-label>
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'filter.bi' | translate }}</ion-label>
                    <ion-toggle [(ngModel)]="info_rent.bill"></ion-toggle>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.sortby= active.sortby?false:true">{{ 'filter.Sortby' | translate }}
                        <span style="float:right">
                            <i [class]="active.sortby?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_rent.sortby" class="hc-radio-group" [hidden]="!active.sortby">
                    <ion-item>
                        <ion-label>Latest relese</ion-label>
                        <ion-radio value="addtime desc"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Price ascending</ion-label>
                        <ion-radio value="price asc"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Price descending</ion-label>
                        <ion-radio value="price desc"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Area ascending</ion-label>
                        <ion-radio value="area asc"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>Area descending</ion-label>
                        <ion-radio value="area desc"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item-divider class="hc-ion-item keyword" color="light">
                    <ion-label stacked>{{ 'filter.Keywords' | translate }}</ion-label>
                    <ion-input placeholder="Garage, pool, waterfront, etc." [(ngModel)]="info_rent.keyword"></ion-input>
                </ion-item-divider>
                <div class="hc-ion-button">
                    <button ion-button navPop>{{ 'filter.Clear' | translate }}</button>
                    <button ion-button (click)="goback()">{{ 'filter.Filter' | translate }}</button>  
                </div>
     </div>
     <div class="content-form none" [class.active]="3 === selectedItem">
            <ion-item class="hc-ion-select" (click)="gotocity()">
                    <ion-label color="main">{{ 'filter.address' | translate }} <span style="float:right">{{ info_per.city }}<i class="iconfont icon-next" style="vertical-align: middle;"></i></span> </ion-label>
                </ion-item>
                <div class="hc-form-item">
                    <ion-label color="main">{{ 'filter.avadate' | translate }} </ion-label>
                    <div class="hc-input-container-2">
                        <div class="datetime-container">
                            <ion-datetime displayFormat="YYYY-MM-DD" palceholader="Start day" [(ngModel)]="info_per.date_min" min="2018" max="2040"></ion-datetime>
                            <span class="tidai" *ngIf="!info_per.date_max">{{ 'filter.sd' | translate }}</span>
                        </div>
                        <span class="line"></span>
                        <div class="datetime-container">
                            <ion-datetime displayFormat="YYYY-MM-DD" palceholader="End day" [(ngModel)]="info_per.date_max" [min]="info_per.date_min" max="2040"></ion-datetime>
                            <span class="tidai" *ngIf="!info_per.date_min">{{ 'filter.ed' | translate }}</span>
                        </div>
                    </div>
                    
                </div>
                <div class="hc-form-item">
                    <ion-label color="main">{{ 'filter.range' | translate }}</ion-label>
                    <div class="hc-input-container-2">
                        <input type="text" placeholder="Min" [(ngModel)]="info_per.price_min">
                        <span class="line"></span>
                        <input type="text" placeholder="Max" [(ngModel)]="info_per.price_max">
                    </div>
                    
                </div>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'filter.search' | translate }}</ion-label>
                    <ion-input type="number" placeholder="unit:'km'"  [(ngModel)]="info_per.distance"></ion-input>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.bedroom=active.bedroom?false:true">{{ 'filter.Bedrooms' | translate }}
                        <span style="float:right">
                            <i [class]="active.bedroom?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <div radio-group [(ngModel)]="info_per.bedroom" class="num-box" [hidden]="!active.bedroom">
                    <ion-item class="num-box-item">
                        <ion-label>{{ 'input.Any' | translate }}</ion-label>    
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>1+</ion-label> 
                        <ion-radio value="1" ></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>2+</ion-label> 
                        <ion-radio value="2"><span>1+</span></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>3+</ion-label> 
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>4+</ion-label> 
                        <ion-radio value="4"></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>5+</ion-label> 
                        <ion-radio value="5"></ion-radio>
                    </ion-item>
                </div>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.bathroom=active.bathroom?false:true">{{ 'filter.Bathrooms' | translate }}
                        <span style="float:right">
                            <i [class]="active.bathroom?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <div radio-group [(ngModel)]="info_per.bathroom" class="num-box" [hidden]="!active.bathroom">
                    <ion-item class="num-box-item">
                        <ion-label>{{ 'input.Any' | translate }}</ion-label>    
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>1+</ion-label> 
                        <ion-radio value="1" ></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>2+</ion-label> 
                        <ion-radio value="2"><span>1+</span></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>3+</ion-label> 
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>4+</ion-label> 
                        <ion-radio value="4"></ion-radio>
                    </ion-item>
                    <ion-item class="num-box-item">
                        <ion-label>5+</ion-label> 
                        <ion-radio value="5"></ion-radio>
                    </ion-item>
                </div>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.type=active.type?false:true">{{ 'filter.type' | translate }}
                        <span style="float:right">
                            <i [class]="active.type?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_per.type" class="hc-radio-group" [hidden]="!active.type">
                    <ion-item>
                        <ion-label>{{ 'input.Any' | translate }}</ion-label>
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.Shared' | translate }}</ion-label>
                        <ion-radio value="1"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.Flat' | translate }}</ion-label>
                        <ion-radio value="2"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.House' | translate }}</ion-label>
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.postby= active.postby?false:true">{{ 'filter.Postby' | translate }}
                        <span style="float:right">
                            <i [class]="active.postby?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_per.postby" class="hc-radio-group" [hidden]="!active.postby">
                    <ion-item>
                        <ion-label>{{ 'input.Any' | translate }}</ion-label>
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.Agent' | translate }}</ion-label>
                        <ion-radio value="1"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.Owner' | translate }}</ion-label>
                        <ion-radio value="2"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.house_conf= active.house_conf?false:true">{{ 'filter.Furnished' | translate }} 
                        <span style="float:right">
                            <i [class]="active.house_conf?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_per.house_conf" class="hc-radio-group" [hidden]="!active.house_conf">
                    <ion-item>
                        <ion-label>{{ 'input.Any' | translate }}</ion-label>
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.ff' | translate }}</ion-label>
                        <ion-radio value="1"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.pf' | translate }}</ion-label>
                        <ion-radio value="2"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.uf' | translate }}</ion-label>
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'filter.po' | translate }}</ion-label>
                    <ion-toggle [(ngModel)]="info_per.stu_in"></ion-toggle>
                </ion-item>
                
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'filter.pf' | translate }}</ion-label>
                    <ion-toggle [(ngModel)]="info_per.pet_in"></ion-toggle>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.people_in= active.people_in?false:true">{{ 'filter.Accept' | translate }}  
                        <span style="float:right">
                            <i [class]="active.people_in?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_per.people_in" class="hc-radio-group" [hidden]="!active.people_in">
                    <ion-item>
                        <ion-label>{{ 'input.Any' | translate }}</ion-label>
                        <ion-radio value=""></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.Male' | translate }}</ion-label>
                        <ion-radio value="1"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.Female' | translate }}</ion-label>
                        <ion-radio value="2"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.Couple' | translate }}</ion-label>
                        <ion-radio value="3"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item class="hc-ion-select">
                    <ion-label color="main">{{ 'filter.bi' | translate }}</ion-label>
                    <ion-toggle [(ngModel)]="info_per.bill"></ion-toggle>
                </ion-item>
                <ion-item class="hc-ion-select">
                    <ion-label color="main" (click)="active.sortby= active.sortby?false:true">{{ 'filter.Sortby' | translate }} 
                        <span style="float:right">
                            <i [class]="active.sortby?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                        </span> 
                    </ion-label>
                </ion-item>
                <ion-list radio-group [(ngModel)]="info_per.sortby" class="hc-radio-group" [hidden]="!active.sortby">
                    <ion-item>
                        <ion-label>{{ 'input.order1' | translate }}</ion-label>
                        <ion-radio value="addtime desc"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.order2' | translate }}</ion-label>
                        <ion-radio value="price asc"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.order3' | translate }}</ion-label>
                        <ion-radio value="price desc"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.order4' | translate }}</ion-label>
                        <ion-radio value="area asc"></ion-radio>
                    </ion-item>
                    <ion-item>
                        <ion-label>{{ 'input.order5' | translate }}</ion-label>
                        <ion-radio value="area desc"></ion-radio>
                    </ion-item>
                </ion-list>
                <ion-item-divider class="hc-ion-item keyword" color="light">
                    <ion-label stacked>{{ 'filter.Keywords' | translate }} </ion-label>
                    <ion-input placeholder="Garage, pool, waterfront, etc." [(ngModel)]="info_per.keyword"></ion-input>
                </ion-item-divider>
                <div class="hc-ion-button">
                    <button ion-button navPop>{{ 'filter.Clear' | translate }}</button>
                    <button ion-button (click)="goback()">{{ 'filter.Filter' | translate }}</button>  
                </div>
     </div>
     <div class="content-form none" [class.active]="4 === selectedItem">
            <ion-item class="hc-ion-select" (click)="gotocity()">
                <ion-label color="main">{{ 'filter.address' | translate }} <span style="float:right">{{ info_service.city }}<i class="iconfont icon-next" style="vertical-align: middle;"></i></span> </ion-label>
            </ion-item>
            <div class="hc-form-item">
                <ion-label color="main">{{ 'filter.range' | translate }} </ion-label>
                <div class="hc-input-container-2">
                    <input type="text" placeholder="Min" [(ngModel)]="info_service.price_min">
                    <span class="line"></span>
                    <input type="text" placeholder="Max"  [(ngModel)]="info_service.price_max">
                </div>
                
            </div>
            <div class="hc-form-item">
                <ion-label color="main">{{ 'filter.stime' | translate }}</ion-label>
                <div class="hc-input-container-2">
                    <div class="datetime-container">
                            <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="info_service.date_min" min="2018" max="2040"></ion-datetime>
                            <span class="tidai" *ngIf="!info_per.date_max">{{ 'filter.sd' | translate }}</span>
                    </div>
                    
                    <span class="line"></span>
                    <div class="datetime-container">
                        <ion-datetime displayFormat="YYYY-MM-DD" [(ngModel)]="info_service.date_max" [min]="info_service.date_min" max="2040"></ion-datetime>                        
                        <span class="tidai" *ngIf="!info_per.date_max">{{ 'filter.ed' | translate }}</span>
                    </div>
                </div>
                
            </div>
            <ion-item class="hc-ion-select">
                <ion-label color="main">{{ 'filter.search' | translate }}</ion-label>
                <ion-input type="number" placeholder="unit:'km'"  [(ngModel)]="info_service.distance"></ion-input>
            </ion-item>
            <ion-item class="hc-ion-select">
                <ion-label color="main" (click)="active.sortby= active.sortby?false:true">{{ 'filter.Sortby' | translate }}
                    <span style="float:right">
                        <i [class]="active.sortby?'iconfont icon-down2':'iconfont icon-down'" style="vertical-align: middle;"></i>
                    </span> 
                </ion-label>
            </ion-item>
            <ion-list radio-group [(ngModel)]="info_service.sortby" class="hc-radio-group" [hidden]="!active.sortby">
                <ion-item>
                    <ion-label>{{ 'input.order1' | translate }}</ion-label>
                    <ion-radio value="addtime desc"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.order2' | translate }}</ion-label>
                    <ion-radio value="price asc"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.order3' | translate }}</ion-label>
                    <ion-radio value="price desc"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.order4' | translate }}</ion-label>
                    <ion-radio value="area asc"></ion-radio>
                </ion-item>
                <ion-item>
                    <ion-label>{{ 'input.order5' | translate }}</ion-label>
                    <ion-radio value="area desc"></ion-radio>
                </ion-item>
            </ion-list>
            <ion-item-divider class="hc-ion-item keyword" color="light">
                <ion-label stacked>{{ 'filter.Keywords' | translate }}</ion-label>
                <ion-input placeholder="The garage, the Shared lease, the sea shore, etc..." [(ngModel)]="info_service.keyword"></ion-input>
            </ion-item-divider>
            <div class="hc-ion-button">
                <button ion-button navPop>{{ 'filter.Clear' | translate }}</button>
                <button ion-button (click)="goback()">{{ 'filter.Filter' | translate }}</button>  
            </div>
     </div>
</ion-content>